<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
	</head>
	<style type="text/css">
		h1{
			text-align: center;
		}
		.biaodan {
			padding: 45px;
			margin: 0 auto;
			border: solid #B0B0B0 1px;
			border-radius: 8px;
			box-shadow: 2px 2px 5px #B0B0B0;
			width: 750px;
			height: 480px;
			display: flex;
			flex-direction: column;
			font-size: 16px;	
			font-family: "微软雅黑";		
			line-height: 40px;
		}
		span{
			display: inline-block;
			text-align: right;
			width: 100px;
			padding-right: 6px;
		}
		#jianjie{
			flex-wrap:wrap;
		}
		#bottom{
			display: flex;
			justify-content: center;
			
		}
	</style>
	<body>
		<h1>表单</h1>
		<div class="biaodan">
			<form  method="post">
				<p><div id="yonghuming">
					<span>用户名：</span><input type="text" placeholder="请输入用户名" 
						style="outline: none;border: none;border-bottom: 1px solid #000000;"/>
					<input type="button" 
						style="border: none;border-bottom: 1px solid #000000;" value="校验用户名是否合法" />
				</div></p>
				<p><div id="mima">	
					<span>密码：</span><input type="password" placeholder="请输入密码" 
						style="outline: none;border: none;border-bottom: 1px solid #000000;"/>
				</div>
				<p><div id="mima">	
				<span>确认密码：</span><input type="password" placeholder="请再次输入密码"  
					style="outline: none;border: none;border-bottom: 1px solid #000000;"/>
				</div></p>
				<p><div id="sex">	
				<span>性别：</span><input type="radio" name="sex" value="1"/>男
					<input type="radio" name="sex" value="2"/>女
				</div></p>
				<p><div id="hobby">
				<span>爱好：</span><input type="checkbox" value="3"/>篮球
					<input type="checkbox" value="4"/>跑步
					<input type="checkbox" value="5"/>游泳
				</div></p>
				<p><div id="subject">
				<span>专业：</span><select>
					<option>计算机</option>
					<option>软件技术</option>
				</select>
				</div></p>
				<p><div id="jianjie">
				<span>个人简介：</span><textarea>
					
				</textarea>
				</div></p>
				<p><div id="touxiang">
				<span>头像：</span><input type="file" />
				</div></p>
				<p><div id="bottom">	
				<input type="button" value="提交" style="margin-right: 30px;"/>
				<input type="button" value="重置" style="margin-left: 30px;"/>
				</div></p>
			</form>
		</div>
	</body>
</html>
